<script setup lang="ts">
import upload from "@/components/upload.vue";
import { NavigateNextRound } from '@vicons/material';
import { FormInst, NButton, NForm } from 'naive-ui';
import { inject, onMounted, provide, reactive, ref, toRefs } from 'vue';
import { rules1 } from "./index.ts";
const formRef = ref<FormInst | null>(null)

const state = reactive<{
    model: any
}>({
    model: {
        // table1: [{}]
        "table1": [{ "c2": "123", "c3": "123", "c4": "123", "c5": "123", "c6": "213", "c7": "123", "c8": "123", "c9": 1732982400000 }], "f1": "1231", "f2": "23123", "f3": "123", "f4": "123", "f5": "123", "f6": "123", "f8": "123", "f7": [{ "id": "705e478b", "batchId": "cba28e4a", "name": "WX20240808-105540.png", "status": "pending", "percentage": 0, "file": {}, "url": null, "type": "image/png", "thumbnailUrl": null, "fullPath": "/WX20240808-105540.png" }], "f9": [{ "id": "229a2797", "batchId": "9902f645", "name": "737f3b4e1fe84ba489fe34e2ea88f909.png", "status": "pending", "percentage": 0, "file": {}, "url": null, "type": "image/png", "thumbnailUrl": null, "fullPath": "/737f3b4e1fe84ba489fe34e2ea88f909.png" }]
    }
})


const { model: formValue } = toRefs(state)
provide('formValue', state.model)

const steps = inject('steps') as any

onMounted(() => {
    if (steps?.data.value?.step1) {
        console.log(steps?.data.value?.step1)
        state.model = steps?.data.value?.step1
    }
})

const nextStep = () => {
    formRef.value?.validate((errors) => {
        if (!errors) {
            steps.setData({
                step1: toRefs(state).model
            })
            steps.next()
        }
    })
}

</script>
<template>
    <div>
        <NForm :model="formValue" ref="formRef" :rules="rules1" require-mark-placement="left">
            <n-card title="查勘概况项目">
                <n-grid x-gap="12" :cols="5">
                    <n-gi>
                        <n-form-item label="甲方公司名" path="f1">
                            <n-input v-model:value="formValue.f1" placeholder="输入甲方公司名" />
                        </n-form-item>
                    </n-gi>
                    <n-gi>
                        <n-form-item label="甲方项目名" path="f2">
                            <n-input v-model:value="formValue.f2" placeholder="输入甲方项目名" />
                        </n-form-item>
                    </n-gi>
                    <n-gi>
                        <n-form-item label="乙方公司名" path="f3">
                            <n-input v-model:value="formValue.f3" placeholder="输入乙方公司名" />
                        </n-form-item>
                    </n-gi>
                    <n-gi>
                        <n-form-item label="乙方项目名" path="f4">
                            <n-input v-model:value="formValue.f4" placeholder="输入乙方项目名" />
                        </n-form-item>
                    </n-gi>
                    <n-gi>
                        <n-form-item label="机房名" path="f5">
                            <n-input v-model:value="formValue.f5" placeholder="输入机房名" />
                        </n-form-item>
                    </n-gi>
                </n-grid>
            </n-card>
            <n-card title="查勘概况" class="mt-4">
                <n-grid x-gap="12" :cols="3">
                    <n-gi>
                        <n-card title="查勘人员">
                            <n-grid x-gap="12" :cols="2">
                                <n-gi>
                                    <n-form-item label="姓名" path="table1[0].c2">
                                        <n-input v-model:value="formValue.table1[0].c2" placeholder="输入查勘人员姓名" />
                                    </n-form-item>
                                </n-gi>
                                <n-gi>
                                    <n-form-item label="电话" path="table1[0].c3">
                                        <n-input v-model:value="formValue.table1[0].c3" placeholder="输入查勘人员电话" />
                                    </n-form-item>
                                </n-gi>
                            </n-grid>
                        </n-card>
                    </n-gi>
                    <n-gi>
                        <n-card title="建设单位联系人">
                            <n-grid x-gap="12" :cols="3">
                                <n-gi>
                                    <n-form-item label="姓名" path="table1[0].c4">
                                        <n-input v-model:value="formValue.table1[0].c4" placeholder="输入建设单位联系人姓名" />
                                    </n-form-item>
                                </n-gi>
                                <n-gi>
                                    <n-form-item label="部门" path="table1[0].c5">
                                        <n-input v-model:value="formValue.table1[0].c5" placeholder="输入建设单位联系人部门" />
                                    </n-form-item>
                                </n-gi>
                                <n-gi>
                                    <n-form-item label="电话" path="table1[0].c6">
                                        <n-input v-model:value="formValue.table1[0].c6" placeholder="输入建设单位联系人电话" />
                                    </n-form-item>
                                </n-gi>
                            </n-grid>
                        </n-card>
                    </n-gi>
                    <n-gi>
                        <n-card title="厂家联系人">
                            <n-grid x-gap="12" :cols="3">
                                <n-gi>
                                    <n-form-item label="姓名" path="table1[0].c7">
                                        <n-input v-model:value="formValue.table1[0].c7" placeholder="输入厂家联系人姓名" />
                                    </n-form-item>
                                </n-gi>
                                <n-gi>
                                    <n-form-item label="电话" path="table1[0].c8">
                                        <n-input v-model:value="formValue.table1[0].c8" placeholder="输入厂家联系人电话" />
                                    </n-form-item>
                                </n-gi>
                                <n-gi>
                                    <n-form-item label="计划查勘时间" path="table1[0].c9">
                                        <n-date-picker v-model:value="formValue.table1[0].c9" type="month"
                                            format="yyyy-MM" placeholder="选择计划查勘时间" />
                                    </n-form-item>
                                </n-gi>
                            </n-grid>
                        </n-card>
                    </n-gi>
                </n-grid>

                <n-card title="本期工程描述" class="mt-4">
                    <n-grid x-gap="12" :cols="1">
                        <n-gi>
                            <n-form-item label="本期工程概况" path="f6">
                                <n-input type="textarea" v-model:value="formValue.f6" placeholder="输入本期工程概况" />
                            </n-form-item>
                        </n-gi>
                        <n-gi>
                            <n-form-item label="网络架构图名称" path="f8">
                                <n-input v-model:value="formValue.f8" placeholder="输入网络架构图名称" />
                            </n-form-item>
                        </n-gi>
                        <n-gi>
                            <n-form-item label="网络架构图" path="f7">
                                <upload v-model:value="formValue.f7" />
                            </n-form-item>
                        </n-gi>
                        <n-gi>
                            <n-form-item label="UPF站点组网方案图例" path="f9">
                                <upload v-model:value="formValue.f9" />
                            </n-form-item>
                        </n-gi>
                    </n-grid>
                </n-card>
            </n-card>
        </NForm>
        <div>
            <NButton type="primary" icon-placement="right" @click="nextStep" class="my-4">
                下一步
                <template #icon>
                    <NIcon>
                        <NavigateNextRound />
                    </NIcon>
                </template>
            </NButton>
        </div>
    </div>
</template>